<div id="slipIframeBar" class="slipiframe-bar">
    <iframe id="slipIframe" src="" frameborder="0" width="100%" height="100%" scrolling="auto"></iframe>
</div>
<div id="maskSlipIframeDiv" class="mask-slipiframe-div" style="display: none;" onclick="closeSlipIframeDiv()"></div>

<script type="text/javascript">
    function openSlipIframeDiv(url) {
        setDisplay('maskSlipIframeDiv', '');
        document.body.style.overflow = 'hidden';
        setClass('slipIframeBar', 'slipiframe-bar-out');
        getItem('slipIframe').src = url;
    }

    function closeSlipIframeDiv() {
        setDisplay('maskSlipIframeDiv', 'none');
        document.body.style.overflow = 'visible';
        setClass('slipIframeBar', 'slipiframe-bar-in');
    }
</script>

<style type="text/css">
    .slipiframe-bar, .slipiframe-bar-out, .slipiframe-bar-in
    {
        width: 100%;
        height: 80%;
        bottom: -80%;
        background-color: white;
        overflow-x: hidden;
        overflow-y: scroll;
        position: fixed;
        z-index: 19991020;
    }

    .slipiframe-bar-out
    {
        -webkit-animation: slipiframeout 0.1s;
        bottom: 0;
    }

    .slipiframe-bar-in
    {
        -webkit-animation: slipiframein 0.1s;
        bottom: -80%;
    }

    @keyframes slipiframeout
    {
        from { bottom: -80%; }
        to { bottom: 0; }
    }

    @keyframes slipiframein
    {
        from { bottom: 0; }
        to { bottom: -80%; }
    }

    .mask-slipiframe-div
    {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 19991010;
    }
</style>